<template>
  <div class="text" ref="text">
    <div ref="div" :class="{ animation: textWidth < divWidth, width: textWidth > divWidth }">
      {{ myText }}
    </div>
    <div v-if=" !textWidth < divWidth">{{ myText }}</div>
  </div>
</template>

<script>
export default {
  props: {
    myText: {
      type: String,
      default: "",
    },
  },
  data: () => {
    return {
      text: null,
      div: null,
    };
  },
  watch: {
    myText() {
      this.$nextTick(() => {
        this.text = getComputedStyle(this.$refs.text).width;
        this.divWidth = getComputedStyle(this.$refs.div).width;
      });
    },
  },
  mounted() {
    this.textWidth = getComputedStyle(this.$refs.text).width;
    this.divWidth = getComputedStyle(this.$refs.div).width;
  },
};
</script>

<style lang="scss" scoped>
.text {
  display: flex;
  width: 100%;
  overflow: hidden;
  > div {
    width: max-content;
    white-space: nowrap;
    padding-right: 0.2rem;
    text-align: center;
  }
  .width {
    width: 100%;
  }
  .animation {
    animation: to 10s linear infinite;
    text-align: start;
    @keyframes to {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  }
}
</style>